<template>
	<n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
		<n-form ref="formRef" label-placement="left" require-mark-placement="right-hanging" :label-width="80"
						:model="formModel">
			<n-form-item :span="12" label="角色名称" path="roleName">
				<n-input v-model:value="formModel.roleName"/>
			</n-form-item>
			<n-form-item :span="12" label="角色编码" path="roleCode">
				<n-input v-model:value="formModel.roleCode"/>
			</n-form-item>
			<n-form-item :span="12" label="数据权限" path="email">
				<n-select v-model:value="formModel.dsType" :options="options" @update:value="handleUpdateValue"/>
			</n-form-item>
			<n-form-item :span="12" label="数据权限部门" v-if="formModel.dsType===3">
				<el-tree
					ref="deptTreeRef"
					:props="{ children: 'children', label: 'name' }"
					:data="treeData"
					show-checkbox
					node-key="id"
				/>
			</n-form-item>
			<n-space class="w-full pt-16px" :size="24" justify="end">
				<n-button class="w-72px" @click="modalVisible=false">取消</n-button>
				<n-button class="w-72px" type="primary" @click="handleSubmit">确定</n-button>
			</n-space>
		</n-form>
	</n-modal>
</template>

<script setup>
import {reactive, ref, toRefs, nextTick, onMounted, defineProps} from 'vue'
import {saveOrUpdate, viewRole, getDeptTableTree} from "@/service";
import {useMessage} from "naive-ui";

const emit = defineEmits(['fetch-data']);
const msg = useMessage()
const deptTreeRef = ref(null);
const state = reactive({
	modalVisible: false,
	title: '新增',
	saveOrUpdateState: 'add',
	formModel: {},
	data: [],
	options: [
		{
			label: '全部',
			value: 0
		},
		{
			label: '本级',
			value: 1
		},
		{
			label: '本级以及子级',
			value: 2
		},
		{
			label: '自定义',
			value: 3
		},
		{
			label: '本人',
			value: 4
		},
	],
	treeData: [],
	treeDialogVisible: false
})

const {
	modalVisible,
	title,
	formModel,
	options,
	treeData
} = toRefs(state)


const handleUpdateValue = (value, option) => {
	if (value === 3) {
		getDeptTableTree().then(res => {
			state.treeData = res.data;
		})
	}
}

const handleAddTable = () => {
	state.title = '新增'
	state.saveOrUpdateState = 'add'
	state.modalVisible = true;
	state.formModel = {};
}


const edit = (row) => {
	state.title = '编辑'
	state.saveOrUpdateState = 'update'
	state.modalVisible = true;
	// 自定义调用
	if (row.dsType===3){
		getDeptTableTree().then(res => {
			state.treeData = res.data;
		})
		// TODO 调用2次是因为 tree回显不上,暂时没有找到解决方法,此处为临时解决方法
		viewRoleTree(row.roleId);
		viewRoleTree(row.roleId);
	} else {
		viewRoleTree(row.roleId);
	}

}

const viewRoleTree=(roleId)=>{
	viewRole(roleId).then(res => {
		const data = res.data;
		if (data.dsScope !== '') {
			let deptIdArray = data.dsScope.split(",");
			deptIdArray.forEach((item) => {
				deptTreeRef.value?.setChecked(item, true, false)
			})
		}
		state.formModel = data;
	})
}


const handleSubmit = async () => {
	if (state.formModel.dsType === 3) {
		let checkedNodes = deptTreeRef.value.getCheckedNodes(false, true);
		if (Array.isArray(checkedNodes) && checkedNodes.length !== 0) {
			let deptIdArray = checkedNodes.map(item => item.id);
			state.formModel.dsScope = deptIdArray.join(",");
		}
	}

	const {data} = await saveOrUpdate(state.formModel, state.saveOrUpdateState);
	resultTableInit(data);
	state.modalVisible = false;
}

const resultTableInit = (data) => {
	if (!data) {
		msg.error("处理失败")
	} else {
		msg.success("处理成功");
	}
	emit('fetch-data');
}

defineExpose({
	handleAddTable,
	edit
})

</script>

<style scoped>

</style>
